input[type=file]图片上传

图片上传到处都能遇到，如何子定义一个截图上传的组件?那就需要了解下面几点基础知识啦~

开发一个本地上传图片控件，需要支持三种上传方式：

1. 选择本地图片上传
2. 拖曳图片上传
3. 截图上传

Action1.选择本地图片上传

<input id='img-input' type='file' accept='image/*.jpg'/><br/>
<img src="" alt="" width='200' id='img1'>
var ipt = document.getElementById('img-input')
// 置空input value
function clearImgInputValue () {
  ipt.value = ''
}
ipt.onchange = function(e){
  console.log('choose a image')
  // 获取File对象
  const file = e.target.files[0]
  let size = file.size
  // if (!file.type.match('image.*')) {
  //   this.clearImgInputValue()
  //   return;
  // }
  // if (size > 5000) {
  //   this.clearImgInputValue()
  //   return;
  // }
  const reader = new FileReader()  // FileReader
  // 将图片转换为base64
  reader.readAsDataURL(file)
  reader.onload = (arg) => {
    // 获取到base64图片内容
    document.querySelector('#img1').src = arg.target.result
    clearImgInputValue()
  }
}

Action2.拖曳图片上传

<div id='drop-zone' style="width:100px;height:100px">拖拽到这里放手~</div>
<img src="" alt="" width='200' id='img2'>
function handleDragOver(event){
  event.stopPropagation()
  event.preventDefault()
  event.dataTransfer.dropEffect = 'copy'
}

// 必须阻止dragenter和dragover事件的默认行为，这样才能触发 drop 事件
function handleFileSelect(event){
  event.stopPropagation()
  event.preventDefault()

  const files = event.dataTransfer.files // 文件对象
  const file = files[0]
  const size = file.size
  const type = file.type

  // if (!type.match('image.*')) {
  //   return;
  // }
  // if (size > 5000) {
  //   return;
  // }
  const reader = new FileReader()
  // 将图片转换为base64
  reader.readAsDataURL(file)
  reader.onload = (arg) => {
    // 获取到base64图片内容
    document.querySelector('#img2').src = arg.target.result
  }
}

const dropZone = document.getElementById('drop-zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

Action3.截图上传

document.addEventListener('paste', function(e){
  console.log('paste a image')
  const clipboard = e.clipboardData
  // 有无内容
  if (!clipboard.items || !clipboard.items.length) {
    return;
  }
  let item = clipboard.items[0]
  if (item.kind === 'file' && item.type.match('image.*')) {
      // 获取图片文件
      let imgFile = item.getAsFile()
      // if (imgFile.size > maxSize) {
      //   return;
      // }
      const reader = new FileReader()
      // 将图片转换为base64
      reader.readAsDataURL(imgFile)
      reader.onload = (arg) => {
        // 获取到base64图片内容
        const fileStream = arg.target.result
      }
  } else {
    console.log('...')
  }
}, false)